<?php 
	$JqueryUploadConfig = array(
		'width' => 250,
		'height' => 150,
		'text' => 'Browse',
		'url' => 'server',
		'callback' => false
	);
	
	if (isset($config['width'])) {
		$JqueryUploadConfig['width'] = $config['width'];
	}
	if (isset($config['height'])) {
		$JqueryUploadConfig['height'] = $config['height'];
	}
	if (isset($config['text'])) {
		$JqueryUploadConfig['text'] = $config['text'];
	}
	if (isset($config['url'])) {
		$JqueryUploadConfig['url'] = $config['url'];
	}
	if (isset($config['callback'])) {
		$JqueryUploadConfig['callback'] = $config['callback'];
	}
?>

<div 
	id="upload-div" 
	style="
		background-image: url('<?php echo "http://placehold.it/{$JqueryUploadConfig['width']}x{$JqueryUploadConfig['height']}&text={$JqueryUploadConfig['text']}" ?>'); 
		width: <?php echo $JqueryUploadConfig['width'] ?>px; 
		height: <?php echo $JqueryUploadConfig['height'] ?>px; 
		cursor: pointer;
	"
>
	&nbsp;
</div>
<form id="fileupload" action="<?php echo $JqueryUploadConfig['url'] ?>" method="POST" enctype="multipart/form-data" style="display: none;">
	<input id="upload-input" type="file" name="image">
</form>

<?php 
	// -------------------//
	// JAVASCRIPT SETTING //
	// -------------------//

	echo $this->Html->script(
		array(
			'jqueryupload/jquery-1.8.2.min', 
			'jqueryupload/jquery.ui.widget', 
			'jqueryupload/jquery.fileupload'
		), 
		array('inline' => false)
	) 
?>

<?php echo $this->Html->css('imgareaselect/imgareaselect-default', 'stylesheet', array('inline' => false)); ?>
<?php echo $this->Html->script('jquery.imgareaselect.min', array('inline' => false)); ?>

<?php echo $this->Html->scriptStart(array('inline' => false)) ?>
$(function () {
	$('#fileupload').fileupload({
		acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		autoUpload: true,
	});
	
	<?php if (isset($JqueryUploadConfig['callback']) && $JqueryUploadConfig['callback']): ?>
	 $('#fileupload').fileupload(
		'option',
		'start',
		function() {
			$('.area-select, .extract').attr('src', '');
			$('.area-select').imgAreaSelect({ instance: true }).cancelSelection();
		}
	);
	
	 $('#fileupload').fileupload(
		'option',
		'done',
		function(e, data) {
			$('.<?php echo $JqueryUploadConfig['callback'] ?>').attr('src', '<?php echo $this->Html->url('/files/tmp/', true) ?>' + data.jqXHR.responseText + '?nocache=' + (new Date().getTime()));
		}

	);
	
	$('.area-select').imgAreaSelect({
        handles: true,
        aspectRatio: '1:1',
        //persistent: true,
        
         onSelectEnd: function (img, selection) {
         $.ajax({
			'url': '<?php echo $this->Html->url(array('controler' => 'filters', 'action' => 'extract')) ?>',
			'data': {'x': selection.x1, 'y': selection.y1, 'size': selection.width},
			'success': function() {
				$('.extract').attr('src', '<?php echo $this->Html->url('/img/filters/extract.jpg', true) ?>' + '?nocache=' + (new Date().getTime()));
			}
		});
        //alert('width: ' + selection.width + '; height: ' + selection.height);
        console.log(selection);
    }
    });
	<?php endif; ?>

	$('#upload-div').click(function(){
		$('#upload-input').trigger('click');
	});
});
<?php echo $this->Html->scriptEnd() ?>

<?php 
	// Remove setting
	if (isset($config)) {
		unset($config);
	}
	unset($JqueryUploadConfig);
?>